<template>
  <view class="card">
    <view class="head flex flex-ai-c">
      <i-icon
        icon="icondianpu"
        type="single"
        size="36rpx"
        color="#FBB000"
      ></i-icon>
      <view class="head-name">{{ info.store_name }}</view>
      <i-icon
        v-if="info.store_status"
        class="icon-store"
        icon="iconmendianrenzheng"
        type="single"
        size="32rpx"
        color="#60C534"
      ></i-icon>
      <i-icon
        v-if="info.deposit_balance > 0"
        class="icon-store"
        icon="iconbao_1"
        type="single"
        size="28rpx"
        color="#eb5c02"
      ></i-icon>
      <view class="head-status">{{ status[info.quote_status] }}</view>
    </view>
    <view class="main" @click="goDetail()">
      <view class="line">
        <view class="name flex">
          <image
            class="car-icon"
            :src="'https://files.yzsheng.com' + info.brand_logo"
            mode="aspectFill"
          ></image>
          车型：
        </view>
        <view class="con font-28">
          {{ info.brand_name }} {{ info.car_type_name
          }}{{ info.configuration_name }}
        </view>
      </view>
      <view class="line" v-if="info.vin_no">
        <view class="name font-24">VIN:</view>
        <view class="con">{{ info.vin_no }}242355</view>
      </view>
      <view class="line">
        <view class="name">需求配件：</view>
        <view class="con">
          <view
            v-for="(item, index) in info.carPartOfferDetails"
            :key="index"
            class="item flex flex-jc-sb"
          >
            <view class="item-left">{{ item.part_Category_Name }}</view>
            <view class="item-right">
              <view>￥{{ item.offer_price }}</view>
              <view class="num">x{{ item.purchase_Number }}</view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer flex">
      <view class="left">
        <view
          ><text class="orange">{{ info.browse_number }}次</text>浏览</view
        >
        <view
          ><text class="orange">{{ info.quote_number }}人</text>报价</view
        >
      </view>
      <view class="right flex" v-if="info.quote_status !== 25">
        <button class="custom-style" @click="chat">
          <i-icon
            class="btn-icon"
            icon="iconxiaoxi"
            type="single"
            size="28rpx"
            color="#333"
          ></i-icon>
          联系商家
        </button>
        <button class="custom-style" @click="call">
          <i-icon
            class="btn-icon"
            icon="iconlianxi"
            type="single"
            size="28rpx"
            color="#333"
          ></i-icon>
          致电商家
        </button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },

  props: {
    info: {
      type: Object,
      default() {
        return {}
      },
    },
  },

  computed: {
    status() {
      return this.$store.state.accessory.status
    },
    accessoryDetails() {
      let str = ''
      for (let i = 0; i < this.info.carPartOfferDetails.length; i++) {
        str =
          str +
          this.info.carPartOfferDetails[i].part_Category_Name +
          '*' +
          this.info.carPartOfferDetails[i].purchase_Number +
          '；'
      }
      return str
    },
  },

  mounted() {},
  methods: {
    //跳转详情
    goDetail() {
      console.log(111)
      uni.navigateTo({
        url:
          '/pages_findAccessory/myQuoteDetail/myQuoteDetail?id=' +
          this.info.car_part_id,
      })
    },

    call() {
      uni.makePhoneCall({
        phoneNumber: this.info.store_phone,
      })
    },

    chat() {
      let carPartDetailsStr = ''
      for (let i = 0; i < this.info.carPartOfferDetails.length; i++) {
        if (i > 4) {
          break
        }
        carPartDetailsStr =
          carPartDetailsStr +
          this.info.carPartOfferDetails[i].part_Category_Name +
          ' '
      }
      this.$store.commit('news/createConversationActive', {
        user: this.info.store_name, //店铺名称
        img: this.info.store_topimg, //店铺头像
        lastTime: '', //
        userId: this.info.store_id, //店铺id
        conversationID: 'C2C' + this.info.store_id,
      })
      this.$store.commit('news/setCardInfo', {
        imgSrc: 'https://files.yzsheng.com' + this.info.brand_logo,
        name:
          this.info.brand_name +
          ' ' +
          this.info.car_type_name +
          ' ' +
          this.info.configuration_name,
        carPartDetailsStr: carPartDetailsStr,
        type: 'accessory',
      })
      uni.navigateTo({
        url:
          '/pages_news/contactSeller/contactSeller?user=' +
          this.info.store_name +
          '&pageId=' +
          this.info.id +
          '&tab=1',
      })
    },
  },
}
</script>

<style lang="scss" scoped>
@mixin center() {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
}

@mixin point() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
}

@mixin point2() {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-all;
}

.card {
  box-shadow: 0px 0px 10rpx 0px rgba(0, 0, 0, 0.14);
  background: #fff;
  padding: 10rpx 24rpx;
  margin: 0 24rpx 24rpx;
  border-radius: 10rpx;
  overflow: hidden;

  .head {
    height: 72rpx;
    border-bottom: 2rpx solid #f6f6f6;
    .head-name {
      padding-left: 16rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #333333;
    }

    .icon-store {
      padding-left: 16rpx;
    }

    .head-status {
      flex: 1;
      font-size: 26rpx;
      font-weight: 500;
      color: #eb5c02;
      text-align: right;
    }
  }

  .main {
    padding-top: 20rpx;

    .line {
      padding-bottom: 20rpx;
      display: flex;

      .name {
        font-size: 26rpx;
        font-weight: 500;
        color: #999999;
        width: 134rpx;

        .car-icon {
          width: 50rpx;
          height: 36rpx;
          padding-right: 14rpx;
        }
      }

      .con {
        flex: 1;
        font-size: 26rpx;
        font-weight: 500;
        color: #333333;
        @include point2 .item {
          padding-bottom: 15rpx;

          .item-left {
            flex: 1;
          }

          .item-right {
            .num {
              color: #999;
              text-align: right;
            }
          }
        }
      }

      .font-28 {
        font-size: 28rpx;
      }
    }
  }

  .footer {
    padding-bottom: 15rpx;
    padding-top: 15rpx;

    .left {
      flex: 1;
      font-size: 24rpx;
      font-weight: bold;
      color: #666;

      .orange {
        color: #eb5c02;
      }
    }

    .right {
      .custom-style {
        margin-left: 24rpx;
        background: linear-gradient(-90deg, #fbd220, #ffe23e);
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        height: 60rpx;
        line-height: 60rpx;
        border-radius: 30rpx;
        width: 180rpx;
        padding: 0 10rpx;
        .btn-icon {
          padding-right: 6rpx;
        }
      }
    }
  }
}
/deep/ uni-button:after {
  border: none;
}
</style>
